<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app" style="padding-bottom: 200px">
    <label style="display: inline-block;width: 100px">用户名:</label><input type="text"><br>
    <label style="display: inline-block;width: 100px">密码:</label><input>

    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" prompt="请输入密码"></myinput>

    <h3>自动生成选项的下拉框</h3>
    <select>
        <option>初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select>

<!--    ref 用于定义组件变量名-->
    <myselect :item="eduItems" label="学历" ref="mySlt"
                :@reset-color="resetColor"></myselect>
    <input v-model="color">
    <button @click="setColor">设置背景色</button>


</div>
<script>
    //注册组件
    Vue.component("myinput", {
        // template 内部元素，必须是单根节点
        template: `
        <div style="padding: 5px">
         <label style="display: inline-block;"
                :style="{width: this.labelWidth || '100px'}">
         {{label}} :
         </label>
         <input :placeholder="placeholder">
        </div>
        `,
        //定义组件属性，定义同样不能用驼峰命名法,使用时，vue会转成驼峰命名法
        // vue 组件属性，是只读的
        props: ["label", "label-width", "prompt"],
        //数据模型
        data() {
            return {
                placeholder: "null"
            };
        },
        created() {
            this.placeholder = this.prompt || "请输入";
        }
    })

    Vue.component("myselect", {
        //props 对象语法，可以限定属性的数据类型 和 验证规则
        props: {
            items: Array, //限定 items 必须是数值
            label: String //限定 字符串类型
        },
        data() {
            return {
                bgColor: '#eee'
            }
        },
        template: `
         <div :style="{backgroundColor : bgcolor}">
         <label>{{label || "下拉列表"}}:<label>
         <select>
            <option v-for="item,i in items">{{i}} - {{item}}
            </option>
         </select>
         <button @click="setParentColor">设置父对象的 color 值 </button>
         </div>
        `,
    methods: {
            setParentColor(){
                // 直接访问父元素 (内置对象) 不建议使用
                //this.$parent.color = "#eee";

                //自定义事件，用$emit 定义事件
                this.$emit("reset-color",'#eee');
            }

    }


    })
    var v = new Vue({
        el: "#app",
        data: {
            eduItems : ["初中","高中","专科","本科"],
            color: '#ddd'
        },
        methods :{
            setColor(){
                // vue 的内置对象，以$开头
                var mySlt = this.$refs.mySlt; //引用组件元素访问
                // 访问组件内部元素
                mySlt.bgcolor = this.color;
            },
            resetColor(color){
                this.color = color;
            }
        }
    })
</script>
</body>
</html>